<template>
	<view class="wanl-order-list">
		<view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navListType" :key="item.state" :class="{ current: tabCurrentTypeIndex === index }" @tap="tabTypeClick(index)">
				{{ item.text }}
			</view>
		</view>

		<view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>

		<swiper :current="tabCurrentIndex" style="height: calc(100% - 80rpx)" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state">
				
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<wanl-empty text="没有找到任何订单"v-if="tag.loaded === true && orderList.length === 0"/>
					<!-- 订单列表 -->
					<view v-for="(order, okey) in orderList" :key="order.id" class="order-item radius-bock">
						<view class="head">
							<view class="shop wanl-gray">
								<text class="wanl-black">订单编号</text>
								<text class="wanl-black margin-lr-xs text-30">{{ order.order_no }}</text>
							</view>
						</view>
						<!-- 商品 -->
						<view class="goods-box" v-for="(goods, key) in order.goods" :key="goods.id">
							<view class="cu-avatar xl margin-right-bj radius" :style="{backgroundImage: 'url('+$wanlshop.oss(goods.image, 70, 70)+')'}"> </view>
							<view class="content margin-right-bj">
								<view class="describe">
									<view class="text-cut-2">
										{{goods.title}}
									</view>
									<view class="wanl_sku text-min">
										<text class="wanl-gray-dark">{{goods.difference}}</text>
									</view>
								</view>
								<view class="parameter">
									<view class="text-price text-sm text-black">
										{{ goods.price }}
									</view>
									<view class="text-min wanl-gray">
										x {{ goods.number }}
									</view>
									
								</view>
							</view>
						</view>
						<!-- 底部 -->
						<view class="price-box text-sm flex">
							<view class=""  v-if="order.verify_status === 0">
								<button class="cu-btn round line-black">待核销</button>
							</view>
							<view class="" v-else>
								<button type="default" class="cu-btn round line-black" disabled="true">已核销</button>
							</view>
						</view>
					
					</view>
					<uni-load-more :status="tag.loadingType" :content-text="contentText"/>
					<view class="edgeInsetBottom"></view> 
				</scroll-view>
			</swiper-item>
		</swiper>
		
		
		<!-- 底部 -->
		<view class="safeAreaBottom"></view>
		<view class="wanlfind-add-container__foot">
			<view class="cu-bar tabbar foot flex flex-direction bg-white align-end justify-center padding-right-bj padding-top-bj">
				<button class="cu-btn lg text-white" @click="startScan" style="width: 100%;background-color: #ff4f00;">
					扫码核销
				</button>
			</view>
		</view>
	</view>	
</template>

<script>
export default {
	data() {
		return {
			tabCurrentIndex: 0,
			tabCurrentTypeIndex: 0,
			navListType : [
				{
					state: 0,
					verify_status:'',
					text: '普通订单',
					loadingType: 'more',
					current_page: 1,
				},
				{
					state: 1,
					verify_status:0,
					text: '拼团订单',
					loadingType: 'more',
					current_page: 1,
				}
			],
			navList: [
				{
					state: 0,
					verify_status:'',
					text: '全部',
					loadingType: 'more',
					current_page: 1,
				},
				{
					state: 1,
					verify_status:0,
					text: '待核销',
					loadingType: 'more',
					current_page: 1,
				},
				{
					state: 2,
					verify_status:1,
					text: '已核销',
					loadingType: 'more',
					current_page: 1,
				}
			],	
			loadingType:'more',
			orderList:[],
			current_page: 1,
			page:1,
			reload: false, //判断是否上拉
			status: 'loading',
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: ''
			},
		};
	},
	// 监听下拉刷新
	// onPullDownRefresh() {
	// 	console.log(111)
	// 	this.page  = 1;
	// 	this.reload = true;
	// 	this.loadData();
	// },
	// 上拉加载
	// onReachBottom() {
	// 	console.log(222)
	// 	if (this.page >= this.last_page) {
	// 		this.status = 'noMore';
	// 	} else {
	// 		this.reload = false;
	// 		this.contentText.contentdown = '上拉显示更多';
	// 		this.page = this.page + 1; //页码+1
	// 		this.status = 'loading';
	// 		this.loadData();
	// 	}
	// },
	onLoad(options) {
		if (!options.state) {
			options.state = 0;
		}
		this.tabCurrentIndex = +options.state;
		// #ifndef MP
		this.loadData();
		// #endif
		// #ifdef MP
		if (options.state == 0) {
			this.loadData();
			
		}
		// #endif
	},
	methods: {
		//获取订单列表
		loadData(source) {
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			let verify_status = navItem.verify_status
			let current_page = this.current_page
			//防止重复加载
			if (navItem.loadingType === 'loading') {
				return;
			}
			if(this.loadingType === 'noMore'){
				return;
			}
			this.loadingType = 'loading';
			let res_url = '';
			if(this.tabCurrentTypeIndex === 0){
				res_url = "/wanlshop/order/getShopVerifyOrder";
			} else {
				res_url = "/wanlshop/groups/order/getShopVerifyOrder";
			}
			// 获取核销列表
			uni.request({
				url: res_url,
				data: {
					verify_status:verify_status,
					page: current_page,
				},
				success: res => {
					uni.stopPullDownRefresh()
					if (res.data.last_page === this.current_page) {
						this.loadingType = 'noMore';
					} else {
						this.loadingType = 'more';
						this.current_page++;
					}
					let orderList = res.data.data.filter(item => {
						//添加不同状态下订单的表现形式
						item = Object.assign(item, this.orderStateExp(item.verify_status));
						//演示数据所以自己进行状态筛选
						if (verify_status === '') {
							//0为全部订单
							return item;
						}
						return item.verify_status === verify_status;
					});
					orderList.forEach(item => {
						this.orderList.push(item);
					});
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
				}
			});
		},

		//扫码核销
		startScan() {
			// 只允许通过相机扫码
			let _this = this
			uni.scanCode({
				onlyFromCamera: true,
				scanType:['qrCode'],
				success: function (res) {
					console.log(res)
					let qrCode = res.result
					//核销接口
					uni.showModal({
						title: '提示',
						content: '确定核销吗？',
						success: function (res) {
							if (res.confirm) {
								uni.request({
									url: '/wanlshop/order/verifyOrder',
									method: 'POST',
									data: {
										verify_qr: qrCode
									},
									success: res => {
										console.log(res.msg)
										uni.showToast({
											title: res.msg,
											duration: 1000
										});
										_this.loadData()
									}
								});
							} 
						}
					});
					
					
				}
			});
		},
		
		disableOrderDetail(){
			this.$wanlshop.msg('无法查看用户订单信息');
		},

		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadingType = 'loading';
		},
		changeTypeTab(e) {
			this.tabCurrentTypeIndex = e.target.current;
			this.loadingType = 'loading';
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			this.orderList = [];
			this.current_page = 1;
			this.loadingType = 'loading';
			this.loadData();
		},
		//顶部tab点击
		tabTypeClick(index) {
			this.tabCurrentTypeIndex = index;
			this.orderList = [];
			this.current_page = 1;
			this.loadingType = 'loading';
			this.loadData();
		},
		//订单状态文字和颜色
		orderStateExp(state) {
			let stateTip = '',
				stateTipColor = '#333';
			switch (+state) {
				case 0:
					stateTip = '待核销';
					stateTipColor = '#f40';
					break;
				case 1:
					stateTip = '已核销';
					break;
				//更多自定义
			}
			return {
				stateTip,
				stateTipColor
			};
		},
		
	}
};
</script>

<style>
page {
	height: 100%;
}
</style>
